<template>
	<view>
		<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="content">首页</block>
		</cu-custom> -->
		<tm-message ref="toast"></tm-message>
		<scroll-view scroll-y="true" style="overflow: auto;">
			<!-- 随机壁纸 -->
			<view id="parallax" class="parallax"></view>
			<!-- banner图 -->
			<view class="uni-padding-wrap">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="3500"
							duration="600">
							<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
								<view class="swiper-item uni-bg-red">
									<image class="swiper-img" :src="item.imageUrl" mode=""></image>
								</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<!-- 导航按钮 -->
			<view class="cu-list grid solids-bottom col-4 no-border">
				<view class="cu-item" v-for="(item, index) in categories" :key="index"
					:style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]" @click="goCategorieslist"
					:data-mid="item.mid">
					<view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
						<view class="cu-tag badge" v-if="item.count != 0">
							<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
						</view>
					</view>
					<text>{{ item.name }}</text>
				</view>
			</view>

			<!-- 消息滚动盒子 -->
			<view class="message-box">
				<view class="page-section swiper">
					<view class="page-section-spacing">
						<swiper style="height: 120rpx;" class="swiper" vertical="ture" circular="true"
							indicator-dots='false' indicator-color="rgba(0,0,0,.0)"
							indicator-active-color="rgba(0,0,0,.0)" autoplay="true" interval="4000">
							<swiper-item class="swiper-list" v-for="(item, index) in messageData" :key="index">
								<view class="message-tltle">{{item.title}}</view>
								<view class="message-content"><span>{{item.tag}}</span>{{item.content}}</view>
							</swiper-item>
						</swiper>
					</view>
				</view>
			</view>

			<image @click="goAboutUs" class="jn_img" src="https://zhoukaiwen.com/img/index_hz2.jpg" mode="widthFix">
			</image>

			<view class="cu-bar bg-white margin-top-xs">
				<view class="action sub-title">
					<text
						class="text-xl text-bold text-blue text-shadow">{{ hotListSource[currentHotListIndex].name }}</text>
					<text class="text-ABC text-blue">hotlist</text>
				</view>
				<view class="action" @click="getHotListData(currentHotListIndex)" v-if="!loadHotList">
					<view class="lynhng-icon li-refresh text-size-lg"></view>
					<text class="text-lg text-grey text-shadow">刷新</text>
				</view>
			</view>
			<view>
				<view scroll-x="true" class="hot-data-scroll">
					<swiper class="hotData-swiper" circular :autoplay="false" @change="hotListDataChange">
						<swiper-item v-for="(item, index) in hotListSource" style="overflow: scroll !important;">
							<view class="hot-main">
								<view class="hot-data-card">
									<view class="hot-list">
										<tm-skeleton v-if="loadHotList" model='list'></tm-skeleton>
										<view v-else-if="item.data && item.data.length > 0"
											v-for="(data, index2) in item.data" :key="index2" class="hot-data-item"
											@click="openHotWebview(data)">
											<view class="text-size-n pa-2">
												<tm-listitem :round="3" :shadow="0" :title="data.title"
													:padding="[5, 5]" :dense="true" :label="data.desc"
													:show-right-icon="false">
													<template #rightValue>
														<span class="hotText">{{ data.hot }}</span>
													</template>
												</tm-listitem>
											</view>
										</view>
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>

			<view class="cu-bar bg-white margin-top-xs">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">热门视频</text>
					<text class="text-ABC text-blue">curriculum</text>
				</view>
				<view class="action" @click="goVideo"><text class="text-lg text-grey text-shadow">更多</text></view>
			</view>

			<view class="skill-sequence-panel-content-wrapper">
				<!--左边虚化-->
				<view class="hide-content-box hide-content-box-left"></view>
				<!--右边虚化-->
				<view class="hide-content-box hide-content-box-right"></view>
				<scroll-view scroll-x="true" class="kite-classify-scroll">
					<view class="kite-classify-cell shadow" v-for="(item, index) in curriculum" :key="index">
						<view :class="'nav-li bg-index' + (index + 1)">
							<view class="nav-name">{{ item.name }}</view>
						</view>
						<view class="nav-content">{{ item.content }}</view>
						<view @click="goVideo" class="nav-btn shadow" :class="'bg-index' + (index + 1)">立即学习</view>
					</view>
				</scroll-view>
			</view>

			<view class="cu-bar bg-white margin-top-xs">
				<view class="action sub-title">
					<text class="text-xl text-bold text-blue text-shadow">项目展示</text>
					<text class="text-ABC text-blue">curriculum</text>
				</view>
				<view class="action" @click="goProjectList"><text class="text-lg text-grey text-shadow">更多</text></view>
			</view>

			<view class="cu-card case no-card">
				<view @click="goProject(item.id)" class="cu-item shadow" v-for="(item, index) in projectList"
					:key="index">
					<view class="image">
						<image :src="item.img" mode="widthFix"></image>
						<view class="cu-tag bg-gradual-orange">{{ item.type | typeF }}</view>
						<view class="cu-bar bg-shadeBottom">
							<text class="text-cut">{{ item.content }}</text>
						</view>
					</view>
					<view class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="margin-lr flex-sub">
								<view class="item-name text-bold text-grey text-lg">{{ item.title }}</view>
								<view class="text-gray text-sm flex justify-between">
									Apache-2.0 license
									<!-- {{ item.createdAt | formatDate }} -->
									<view class="text-gray text-df">
										<text class="cuIcon-favorfill margin-lr-xs"></text>
										{{ item.stars }}
										<text class="cuIcon-attentionfavorfill margin-lr-xs"></text>
										{{ item.watching }}
										<text class="cuIcon-fork margin-lr-xs"></text>
										{{ item.forks }}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view style="height: 140rpx;width: 1rpx;"></view>
		</scroll-view>
	</view>
</template>

<!-- 首页 -->
<script>
	import request from '@/common/request.js';
	import config from '@/config.js';
	import addTip from '../../components/wxcomponents/struggler-uniapp-add-tip/struggler-uniapp-add-tip.vue';

	const hostListBaseUrl = "https://hotapi.lysdad.cn";
	export default {
		components: {
			addTip,
		},
		data() {
			return {
				duration: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				globalConfig: getApp().globalData.config,
				currentHotListModel: null,
				currentHotListIndex: 0,
				loadHotList: false,
				hostListData: [],
				bannerList: [{
						imageUrl: '/static/images/banner/aurora-p0.png'
					},
					{
						imageUrl: '/static/images/banner/aurora-p1.png'
					},
					{
						imageUrl: '/static/images/banner/aurora-p2.png'
					},
					{
						imageUrl: '/static/images/banner/aurora-p3.png'
					}
				],
				categories: [{
						cuIcon: 'hotfill',
						color: 'red',
						// badge: '优惠',
						mid: '1',
						name: '学习技术'
					},
					{
						cuIcon: 'colorlens',
						color: 'orange',
						badge: 1,
						mid: '2',
						name: '需求定制'
					},
					{
						cuIcon: 'goodsnewfill',
						color: 'yellow',
						badge: 12,
						mid: '3',
						name: '客户定制'
					},
					{
						cuIcon: 'calendar',
						color: 'cyan',
						badge: 'new',
						mid: '4',
						name: '文章资讯'
					}
				],
				messageData: [{
						title: '「Aurora博客」感谢支持',
						tag: 'QQ群',
						content: 'Aurora博客技术交流: 338371628'
					},
					{
						title: 'uView UI',
						tag: '框架',
						content: '全面兼容nvue的uni-app生态框架'
					},
					{
						title: 'TM-VUETIFY',
						tag: '组件库',
						content: 'UNI-APP组件库、JS工具包、CSS库'
					},
					{
						title: 'ColorUI',
						tag: 'CSS库',
						content: '高度自定义的 Css 组件库'
					},
					// {
					// 	title: '组件持续更新中，敬请期待！',
					// 	tag: '更新',
					// 	content: '致力提供优质的组件，gitee保持最新'
					// },
				],
				curriculum: [{
						name: 'Aurora博客部署',
						content: 'Springboot+Vue前后短分离项目部署'
					},
					{
						name: '后台管理系统',
						content: 'vue+iview的后台管理系统建设系统开发...'
					},
					{
						name: 'App模板',
						content: '基于uniapp开发的效率类APP，开发至上线...'
					},
					{
						name: 'PC端官网开发',
						content: 'html/css/jQuery建设的PC端官方门户网站...'
					},
					{
						name: 'uniapp多端打包',
						content: 'uniapp开发完成上线的打包流程，上架商店等...'
					}
				],
				projectList: [{
					"id": 1,
					"type": 2,
					"title": "Aurora极光博客",
					"img": "/static/images/project/p1.png",
					"content": "Springboot+Vue前后短分离项目｜多种技术栈｜顶级UI",
					"author": "花未眠",
					"createdAt": 1664309170029,
					"state": 1,
					"seeNum": 11503,
					"likesNum": 819,
					stars: "3.3k",
					forks: 555,
					watching: 20,
					"imgList": "https://cdn.zhoukaiwen.com/FmQUu_zzkFPgfD9mW_s6VUPRfrOu,https://cdn.zhoukaiwen.com/FggyNz97y1XRbqvgGLy8TlHqrk9S,https://cdn.zhoukaiwen.com/FoCAcPkAr33sfNyEIxcqjnpTTWxc,https://cdn.zhoukaiwen.com/FplP6uDupEtz52EY2TSH9driQMDH"
				}, {
					"id": 2,
					"type": 2,
					"title": "Aurora极光博客-Uniapp",
					"img": "/static/images/project/m1.jpg",
					"content": "UNI-APP开发| uView2.0｜Tm-Vuetify｜ColorUI",
					"author": "lynhng.com",
					"state": 1,
					"seeNum": 11503,
					"likesNum": 819,
					stars: "3.3k",
					forks: 555,
					watching: 20,
					"imgList": "https://cdn.zhoukaiwen.com/FmQUu_zzkFPgfD9mW_s6VUPRfrOu,https://cdn.zhoukaiwen.com/FggyNz97y1XRbqvgGLy8TlHqrk9S,https://cdn.zhoukaiwen.com/FoCAcPkAr33sfNyEIxcqjnpTTWxc,https://cdn.zhoukaiwen.com/FplP6uDupEtz52EY2TSH9driQMDH"
				}],
				hotListSource: [{
						name: '百度 - 热搜榜',
						apiUrl: hostListBaseUrl + '/baidu',
						data: [],
					},
					{
						name: '今日头条 - 热榜',
						apiUrl: hostListBaseUrl + '/toutiao',
						data: [],
					},
					{
						name: '微博 - 热搜榜',
						apiUrl: hostListBaseUrl + '/weibo',
						data: []
					},
					{
						name: '澎湃新闻 - 热榜',
						apiUrl: hostListBaseUrl + '/thepaper',
						data: []
					},
					{
						name: '腾讯新闻 - 热点榜',
						apiUrl: hostListBaseUrl + '/newsqq',
						data: []
					},
					{
						name: '网易新闻 - 热点榜',
						apiUrl: hostListBaseUrl + '/netease',
						data: []
					},
					{
						name: '36氪 - 热榜',
						apiUrl: hostListBaseUrl + '/36kr',
						data: []
					},
					{
						name: '少数派 - 热榜',
						apiUrl: hostListBaseUrl + '/sspai',
						data: []
					},
					{
						name: '知乎 - 热榜',
						apiUrl: hostListBaseUrl + '/zhihu',
						data: []
					},
					{
						name: '稀土掘金 - 热榜',
						apiUrl: hostListBaseUrl + '/juejin',
						data: []
					},
					{
						name: '百度贴吧 - 热议榜',
						apiUrl: hostListBaseUrl + '/tieba',
						data: []
					}, {
						name: '微信读书 - 飙升榜',
						apiUrl: hostListBaseUrl + '/weread',
						data: []
					},
					{
						name: '原神 - 最新信息',
						apiUrl: hostListBaseUrl + '/genshin',
						data: []
					},
					{
						name: '英雄联盟 - 更新公告',
						apiUrl: hostListBaseUrl + '/lol',
						data: []
					},
					{
						name: '哔哩哔哩 - 热门榜',
						apiUrl: hostListBaseUrl + '/bilibili',
						data: []
					},
					{
						name: '抖音 - 热点榜',
						apiUrl: hostListBaseUrl + '/douyin',
						data: []
					},
					{
						name: '抖音 - 热歌榜',
						apiUrl: hostListBaseUrl + '/douyin_music',
						data: []
					},
					{
						name: '豆瓣 - 新片榜',
						apiUrl: hostListBaseUrl + '/douban_new',
						data: []
					}
				]
			};
		},
		watch: {},
		mounted() {
			// this.getData();
			// 在页面中定义插屏广告
			let interstitialAd = null

			// #ifdef MP
			// 在页面onLoad回调事件中创建插屏广告实例
			if (wx.createInterstitialAd) {
				interstitialAd = wx.createInterstitialAd({
					adUnitId: 'adunit-0843cdd8084e561d'
				})
				interstitialAd.onLoad(() => {})
				interstitialAd.onError((err) => {})
				interstitialAd.onClose(() => {})
			}
			// #endif

			// 在适合的场景显示插屏广告
			if (interstitialAd) {
				interstitialAd.show().catch((err) => {
					console.error(err)
				})
			}
			// 插屏广告结束
			this.currentHotListModel = this.hotListSource[0]
			this.getHotListData(0)
		},
		methods: {
			getData() {
				let opts = {
					url: 'api/project/list',
					method: 'get'
				};
				this.$refs.toast.show({
					model: 'load',
					label: '加载中'
				})
				request.httpRequest(opts).then(res => {
					this.$refs.toast.hide();
					if (res.statusCode == 200) {
						this.projectList = res.data.data;
					} else {
						this.projectList = [];
					}
				});
			},
			openHotWebview(data) {
				uni.navigateTo({
					url: '/pages/divWebView?src=' + data.mobileUrl + "&title=" + this.hotListSource[this
						.currentHotListIndex].name
				});
			},
			hotListDataChange({
				detail
			}) {
				this.currentHotListIndex = detail.current;
				if (!this.hotListSource[detail.current].data || this.hotListSource[detail.current].data.length < 1) {
					this.getHotListData(detail.current)
				}
			},
			getHotListData(index) {
				this.loadHotList = true;
				this.hotListSource[index].data = [];
				if (this.currentHotListModel) {
					uni.request({
						url: this.hotListSource[index].apiUrl,
						success: (res) => {
							this.hotListSource[index].data = res.data.data;
							this.loadHotList = false;
						}
					})
				}
			},
			goCategorieslist: function(e) {
				if (e.currentTarget.dataset.mid == 1 || e.currentTarget.dataset.mid == 2) {
					uni.navigateTo({
						url: '../timeline?mid=' + e.currentTarget.dataset.mid
					});
				} else if (e.currentTarget.dataset.mid == 3) {
					uni.navigateTo({
						url: '../../os_project/index'
					});
				} else if (e.currentTarget.dataset.mid == 4) {
					uni.switchTab({
						url: '/pages/index/article'
					});
				}
			},
			goProjectList() {
				uni.navigateTo({
					url: '../project/list'
				});
			},
			goProject(id) {
				uni.navigateTo({
					url: '../project/project?id=' + id
				});
			},
			goVideo() {
				uni.navigateTo({
					url: '../video'
				});
			},
			goAboutUs() {
				uni.navigateTo({
					url: '../me/about_us'
				})
			}
		},
		filters: {
			formatDate(value) {
				if (value == undefined) {
					return;
				}
				// let date = new Date(value * 1000);
				let date = new Date(value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				// return y + '-' + MM + '-' + d; //年月日	 + ' ' + h + ':' + m
				return y + '-' + MM + '-' + d; //年月日时分秒
			},
			typeF(value) {
				if (!value) {
					return;
				}
				if (value == 2) {
					return '开源'
				}
			}
		},
	};
</script>
<style lang="scss" scoped>
	page {
		background: linear-gradient(200deg, #e3c5eb, #a9c1ed);
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.jn_img {
		width: 700rpx;
		display: block;
		margin: 15rpx auto;
		border-radius: 20rpx;
	}

	.message-box {
		width: 100%;
		height: 120rpx;
		background: url(https://zhoukaiwen.com/img/icon/clock.gif) #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100rpx 100rpx;
		background-position: 15rpx 10rpx;
		margin: 0rpx 0rpx 10rpx 0rpx;
		padding-left: 130rpx;

		.message-tltle {
			height: 65rpx;
			line-height: 70rpx;
			font-weight: 600;
			font-size: 28rpx;
		}

		.message-content {
			color: #0081ff;

			span {
				background-color: #0081ff;
				color: #FFFFFF;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				margin-right: 8rpx;
			}
		}
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		width: 100%;
		height: 380rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.kite-classify-cell {
		display: inline-block;
		width: 266rpx;
		height: 370rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
	}

	.nav-li {
		padding: 40rpx 30rpx;
		width: 100%;
		background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: '';
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: '';
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-content {
		width: 100%;
		padding: 15rpx;
		display: inline-block;
		overflow-wrap: break-word;
		white-space: normal;
	}

	.nav-btn {
		width: 200rpx;
		height: 60rpx;
		margin: 8rpx auto;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
	}

	.bg-index1 {
		background-color: #19cf8a;
		color: #fff;
	}

	.bg-index2 {
		background-color: #954ff6;
		color: #fff;
	}

	.bg-index3 {
		background-color: #5177ee;
		color: #fff;
	}

	.bg-index4 {
		background-color: #f49a02;
		color: #fff;
	}

	.bg-index5 {
		background-color: #ff4f94;
		color: #fff;
	}

	.bg-index6 {
		background-color: #7fd02b;
		color: #fff;
	}

	.item-name {
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.parallax {
		/* 壁纸 */
		background-image: url("https://api.likepoems.com/img/mc");
		/* 对图片进行剪切，保留原始比例 */
		background-size: cover;
		/* 设置背景图片的定位 */
		background-position: 50% 50%;
		/* 占一屏 */
		height: 100vh;
		/* 相对定位 */
		position: relative;
		/* 将文字透明镂空 */
		-webkit-text-fill-color: transparent;
		overflow: hidden;
	}
</style>

<!-- 综合热榜 -->
<style scoped>
	.hotData-swiper {
		height: 60vh;
	}

	.hot-data-scroll {
		width: 100%;
		height: 60vh;
		overflow: hidden;
		white-space: nowrap;
	}

	.hot-data-cell {
		display: inline-block;
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
	}

	.hot-main {
		min-height: 400px;
		margin: 5px;
	}

	.hot-data-card {
		border-radius: 12px;
		box-shadow: 5px 5px 10px transparent,
			-5px -5px 10px transparent;
	}

	.top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.dots {
		display: flex;
		transition: all 0.8s;
		cursor: pointer;
	}

	.dots-name {
		display: flex;
	}

	.title {
		line-height: 24px;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		display: inline-flex;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}

	.top p {
		font-size: 20px;
		font-weight: bold;
	}

	.hot-list {
		gap: 4px;
		flex: 1 1;
		overflow-y: scroll;
		overflow-x: scroll;
	}

	.hot-data {
		overflow-y: scroll;
		overflow-x: scroll;
	}

	.hot-data::-webkit-scrollbar {
		width: 2px !important;
		border-radius: 5px;
	}

	.hot-data::-webkit-scrollbar-thumb {
		width: 2px !important;
		border-radius: 5px;
		background: #fff;
	}

	.hot-data-item {
		margin-bottom: 8px;
		display: block;
		width: 100%;
		cursor: pointer;
	}

	.hot-data-item>p>a {
		font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
		font-size: 15px;
	}

	.hot-data-item>p>a:hover {
		color: #0fb6d6;
		opacity: 1;
	}

	.hot-list>p {
		margin-bottom: 5px;
	}

	.hotText {
		width: fit-content;
		background-color: rgba(0, 0, 0, 0.253);
		color: red;
		border-radius: 6px;
		padding: 2px;
		z-index: 10;
		right: 10px;
		font-size: 12px;
		line-height: 15px;
	}

	.animation-text {
		text-align: center;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		-webkit-box-decoration-break: clone;
		background-color: #cccccc;
		background-image: linear-gradient(90deg, red, #ffffff, gray);
		animation: 1s ease-in-out 0s infinite normal none running skeletonLoading;
	}

	.ease-in-out {
		transition-timing-function: cubic-bezier(.4, 0, .2, 1) !important
	}

	@keyframes skeletonLoading {
		0% {
			background-position: -200px 0;
		}

		100% {
			background-position: calc(200px + 100%) 0;
		}
	}

	.popup-content {
		padding: 0;
		height: 100vh;
		width: 100%;
		background-color: rgb(255, 255, 255);
		z-index: 9999;
		border-radius: 0;
	}

	.popupBottom {
		height: 100vh;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		padding: 10rpx 20rpx;
		border-radius: 20rpx 20rpx 0 0;
		background-color: rgb(255, 255, 255);
	}


	.popupBtn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 5%;
	}

	.popupBtnR {
		color: #2E5BFF;
	}
</style>